<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<base href="../../../" />
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>Créer un texte ([name])</h1>
		<div>
			<p>
				Parfois vous aurez besoin d'utiliser du texte dans votre application three.js - ici
				sont présentées quelques façons de le faire.
			</p>
		</div>

		<h2>1. DOM + CSS</h2>
		<div>
			<p>
				Utiliser du HTML est généralement la manière la plus simple et la plus rapide d'ajouter du texte. Ceci est la méthode
				utilisée pour les overlays descriptifs de la plupart des exemples three.js.
			</p>
			<p>Vous pouvez ajouter du contenu à une</p>
			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>

			<p>
				et utiliser CSS pour donner une position absolute située au-dessus de tout le reste du contenu grâce au
				z-index plus particulièrement si vous utilisez three.js en plein-écran.
			</p>

			<code>
#info {
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
	z-index: 100;
	display:block;
}
			</code>

		</div>

		
		<h2>2. Utiliser [page:CSS2DRenderer] ou [page:CSS3DRenderer]</h2>
		<div>
			<p>
				Utilisez ces moteurs de rendu pour dessiner des textes de haute-qualité contenus dans l'élément DOM de vos scène three.js.
				Cette approche est similaire à la 1. excepté qu'avec ces moteurs de rendu les éléments peuvent être intégrés plus précisément et dynamiquement à la scène.
			</p>
		</div>
		

		<h2>3. Associer un texte au canvas et l'utiliser comme [page:Texture]</h2>
		<div>
			<p>Utilisez cette méthode si vous souhaitez dessiner du texte facilement sur un plane dans votre scène three.js.</p>
		</div>


		<h2>4. Créez un modèle dans votre application 3D préférée et exportez le dans three.js</h2>
		<div>
			<p>Utilisez cette méthode si vous préférez travailler avec vos applications 3D puis importer vos modèles dans three.js.</p>
		</div>


		<h2>5. Forme de texte procédurale</h2>
		<div>
			<p>
				Si vous souhaitez travailler en three.js pur ou créer des formes de texte 3D procédurales et dynamiques,
				vous pouvez créer un mesh qui aura pour geometry une instance de THREE.TextGeometry:
			</p>
			<p>
				<code>new THREE.TextGeometry( text, parameters );</code>
			</p>
			<p>
				Pour que cela fonctionne, dans tous les cas, votre TextGeometry aura besoin d'une instance de THREE.Font
				avec comme paramètre "font".

				Voir [page:TextGeometry] pour avoir plus d'informations sur comment cela peut-être mis en place, une description de chaque
				paramètre accepté, et une liste des fonts JSON qui viennent avec la distribution THREE.js.
			</p>

			<h3>Exemples</h3>

			<p>
				[example:webgl_geometry_text WebGL / geometry / text]<br />
				[example:webgl_shadowmap WebGL / shadowmap]
			</p>

			<p>
				Si Typeface ne fonctionne pas, ou que vous souhaitez une font qui n'est pas ici, il y a un tutoriel
				avec un script python pour blender qui vous permet d'exporter du texte dans au format JSON de Three.js:
				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
			</p>

		</div>


		<h2>6. Fonts Bitmap</h2>
		<div>
			<p>
				BMFonts (bitmap fonts) permet de transformer les lots de glyphs en une seule BufferGeometry. Le rendu BMFont
				supporte les sauts-de-ligne, l'espacement des lettres, le crénage, les fonctions de distance signée avec
				des dérivées, les fonctions de distance signée multi-channel, les fonts multi-texture, et bien plus.
				Voir [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] ou [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
			</p>
			<p>
				Les fonts de base sont disponibles dans des projets comme
				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], ou vous pouvez créer la votre
				depuis n'importe quelle font .TTF, en optimisant les performances en n'incluant que les character requis par le projet.
			</p>
			<p>
				Quelques outils utiles:
			</p>
			<ul>
				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(ligne de commande)</i></li>
				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(applciations desktop)</i></li>
			</ul>
		</div>


		<h2>7. Troika Text</h2>
		<div>
			<p>
				Le package [link:https://www.npmjs.com/package/troika-three-text troika-three-text] effectue un rendu 
				de qualité et anti-alisé des textes, utilisant une technique similaire à BMFonts, mais fonctionne directement avec n'importe quel fichier de font .TTF 
				ou .WOFF pour que vous n'ayez pas à pré-générer une texture glyph hors-ligne. Il ajoute également des fonctionnalités 
				comme:
			</p>
			<ul>
				<li>Des effets comme les strokes, les ombres portées, et les courbures</li>
				<li>La capacité d'appliquer n'importe quel matériau three.js, même un ShaderMaterial customisé</li>
				<li>Le support des ligatures de fonts, des scripts pour les lettres jointes, et un layout bi-directionnel de droite-à-gauche</li>
				<li>Une optimisation pour les grandes quantités de textes dynamiques, en réalisant la plupart du travail en dehors du thread principal dans un web worker</li>
			</ul>
		</div>


	</body>
</html>
